<template>
  <view class="community-page">
    <!-- 顶部导航标签 -->
    <view class="nav-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['nav-tab', activeTab === index ? 'active' : '']"
        @tap="setActiveTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 帖子列表 -->
    <scroll-view class="post-list" scroll-y="true">
      <view class="post-item" v-for="post in filteredPosts" :key="post.id">
        <!-- 用户信息 -->
        <view class="post-header">
          <view class="user-info">
            <image class="avatar" :src="post.avatar" mode="aspectFill"></image>
            <view class="user-details">
              <text class="username">{{ post.username }}</text>
              <text class="post-meta">{{ post.time }}·{{ post.category }}</text>
            </view>
          </view>
        </view>

        <!-- 帖子内容 -->
        <view class="post-content">
          <text class="post-text">{{ post.content }}</text>
          
          <!-- 图片区域 -->
          <view class="post-images" v-if="post.images && post.images.length > 0">
            <view 
              v-for="(image, imgIndex) in post.images" 
              :key="imgIndex"
              class="post-image"
              :class="getImageClass(post.images.length)"
            >
              <image-preview 
                :imageUrl="image" 
                :imageList="post.images"
                @click="handleImageClick"
              />
            </view>
          </view>
        </view>

        <!-- 互动按钮 -->
        <view class="post-actions">
          <view class="action-item" @tap="handleLike(post)">
            <uv-icon name="heart" :color="post.isLiked ? '#ff4757' : '#999'" size="20"></uv-icon>
            <text class="action-text">{{ post.likes }}</text>
          </view>
          <view class="action-item" @tap="handleComment(post)">
            <uv-icon name="chat" color="#999" size="20"></uv-icon>
            <text class="action-text">{{ post.comments }}</text>
          </view>
          <view class="action-item" @tap="handleCollect(post)">
            <uv-icon name="star" :color="post.isCollected ? '#ffa502' : '#999'" size="20"></uv-icon>
            <text class="action-text">收藏</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 浮动发布按钮 -->
    <view class="fab" @tap="handlePublish">
      <uv-icon name="plus" color="#fff" size="24"></uv-icon>
    </view>

    <!-- 底部导航栏 -->
    <uv-tabbar :value="tabValue" @change="tabChange" activeColor="#4ECDC4" style="width: 100%;">
      <uv-tabbar-item text="主页" icon="home-fill"></uv-tabbar-item>
      <uv-tabbar-item text="社区" icon="grid-fill"></uv-tabbar-item>
      <uv-tabbar-item text="我的" icon="account-fill"></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script>
import ImagePreview from '@/components/zoe-picPreview/image-preview/index.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      activeTab: 0,
      tabValue: 1, // 社区页面激活
      tabs: ['全部', '职场面试', '客户洽谈', '商务谈判'],
      posts: [
        {
          id: 1,
          username: '职场达人',
          avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          time: '2小时前',
          category: '职场面试',
          content: '今天面试遇到一个棘手问题:"你最大的缺点是什么?"大家有什么好的回答策略吗?',
          images: [
            'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            'https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60'
          ],
          likes: 128,
          comments: 42,
          isLiked: false,
          isCollected: false
        },
        {
          id: 2,
          username: '情感导师',
          avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          time: '5小时前',
          category: '相亲约会',
          content: '第一次约会如何避免冷场?分享5个实用话题技巧,让你轻松应对各种约会场景!',
          images: [
            'https://images.unsplash.com/photo-1511306404404-ad607bd7c601?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60'
          ],
          likes: 356,
          comments: 89,
          isLiked: false,
          isCollected: false
        },
        {
          id: 3,
          username: '商务精英',
          avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          time: '1天前',
          category: '商务谈判',
          content: '谈判桌上如何占据主动?分享几个实用的谈判技巧，让你在商务场合游刃有余！',
          images: [
            'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60'
          ],
          likes: 203,
          comments: 67,
          isLiked: false,
          isCollected: false
        },
        {
          id: 4,
          username: '客户经理',
          avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
          time: '2天前',
          category: '客户洽谈',
          content: '如何快速建立客户信任?分享几个实用的沟通技巧，让客户关系更稳固！',
          images: [
            'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60'
          ],
          likes: 156,
          comments: 34,
          isLiked: false,
          isCollected: false
        }
      ]
    }
  },
  computed: {
    filteredPosts() {
      if (this.activeTab === 0) {
        return this.posts
      }
      return this.posts.filter(post => post.category === this.tabs[this.activeTab])
    }
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index
    },
    handleLike(post) {
      post.isLiked = !post.isLiked
      if (post.isLiked) {
        post.likes++
      } else {
        post.likes--
      }
    },
        handleComment(post) {
         uni.navigateTo({
         url: `/pages/communityDetail?id=${post.id}`
        })
      },
      handleImageClick() {
        // 图片点击事件处理
        console.log('图片被点击')
      },
    handleCollect(post) {
      post.isCollected = !post.isCollected
      uni.showToast({
        title: post.isCollected ? '已收藏' : '取消收藏',
        icon: 'none'
      })
    },
    handlePublish() {
      uni.navigateTo({ url: '/pages/createPost' })
    },
    getImageClass(count) {
      if (count === 1) return 'single-image'
      if (count === 2) return 'double-image'
      return 'triple-image'
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/index/index' })
      } else if (index === 1) {
        // 当前页面，不需要跳转
      } else if (index === 2) {
        uni.navigateTo({ url: '/pages/profile' })
      }
    }
  },
  onLoad() {
    // 页面加载时的初始化逻辑
  },
  onShow() {
    // 页面显示时的逻辑
  }
}
</script>

<style lang="scss" scoped>
.community-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.nav-tabs {
  display: flex;
  background: #fff;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
  transition: all 0.3s;
}

.nav-tab.active {
  color: #4ECDC4;
  font-weight: bold;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #4ECDC4;
  border-radius: 2rpx;
}

.post-list {
  height: calc(100vh - 200rpx);
  padding: 20rpx;
}

.post-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.post-header {
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.post-meta {
  font-size: 24rpx;
  color: #999;
}

.post-content {
  margin-bottom: 20rpx;
}

.post-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
  display: block;
}

.post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.post-image {
  border-radius: 8rpx;
  overflow: hidden;
}

.post-image.single-image {
  width: 100%;
  height: 400rpx;
}

.post-image.double-image {
  width: calc(50% - 4rpx);
  height: 200rpx;
}

.post-image.triple-image {
  width: calc(33.33% - 6rpx);
  height: 180rpx;
}

.post-image image-preview {
  width: 100%;
  height: 100%;
}

.post-actions {
  display: flex;
  justify-content: space-around;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

.fab {
  position: fixed;
  bottom: 120rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: #4ECDC4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(78, 205, 196, 0.4);
  z-index: 1000;
}

.fab:active {
  transform: scale(0.95);
}
</style>
